---
title: Input
description: A versatile input component with multiple variants, states, and styling options for creating consistent form inputs throughout your application.
---
import { 
  InputDefaultVariant, 
  InputSuccessVariant, 
  InputWarningVariant, 
  InputErrorVariant, 
  InputDisabledVariant, 
  InputWithDefaultValue, 
  InputWithPasswordToggle, 
  InputWithBothIcons 
} from "./input.variants";

## Overview

The Input component provides a comprehensive input system for creating form fields throughout your application. It's designed to handle various input types with multiple variants, states, and styling options while maintaining accessibility and consistent design patterns.

## Usage

```tsx
import { Input } from "@unkey/ui";

export default function MyComponent() {
  return (
    <div>
      <Input placeholder="Enter text..." />
      <Input variant="success" placeholder="Success state" />
      <Input variant="error" placeholder="Error state" />
      <Input disabled placeholder="Disabled input" />
    </div>
  );
}
```

## Examples

### Default Variant
Standard input with default styling and behavior.

<InputDefaultVariant />

### Success Variant
Input with success styling for positive validation states.

<InputSuccessVariant />

### Warning Variant
Input with warning styling for cautionary states.

<InputWarningVariant />

### Error Variant
Input with error styling for validation errors.

<InputErrorVariant />

### Disabled Variant
Input in disabled state for unavailable interactions.

<InputDisabledVariant />

### With Default Value
Input with a pre-filled default value.

<InputWithDefaultValue />

### With Password Toggle
Input with password visibility toggle functionality.

<InputWithPasswordToggle />

### With Both Icons
Input with both left and right icons for enhanced functionality.

<InputWithBothIcons />

## Features

- **Multiple Variants**: Different visual styles (default, success, warning, error)
- **Interactive States**: Hover, focus, and disabled states
- **Icon Support**: Left and right icon positioning
- **Password Toggle**: Built-in password visibility toggle
- **Accessibility**: Full accessibility support with proper ARIA attributes
- **Responsive Design**: Adapts to different screen sizes
- **Dark Mode Support**: Consistent appearance in light and dark themes
- **Customizable**: Extensive styling options through className prop

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `"default" \| "success" \| "warning" \| "error"` | `"default"` | The visual variant of the input |
| `size` | `"sm" \| "md" \| "lg"` | `"md"` | The size of the input |
| `disabled` | `boolean` | `false` | Whether the input is disabled |
| `placeholder` | `string` | - | Placeholder text for the input |
| `value` | `string` | - | Controlled value for the input |
| `defaultValue` | `string` | - | Default value for uncontrolled input |
| `leftIcon` | `React.ReactNode` | - | Icon to display on the left side |
| `rightIcon` | `React.ReactNode` | - | Icon to display on the right side |
| `className` | `string` | - | Additional CSS classes |

The component also accepts all standard HTML input element props.

## Variants

### Default
- Standard input styling with neutral colors
- Use for most form inputs
- Balanced visual weight

### Success
- Green color scheme for positive states
- Use for validated or successful inputs
- Encourages positive user feedback

### Warning
- Yellow/orange color scheme for cautionary states
- Use for inputs that need attention
- Indicates potential issues

### Error
- Red color scheme for error states
- Use for validation errors or failed inputs
- Clearly indicates problems

## Structure

The Input component is composed of:

1. **Input Container** - Main wrapper with styling and positioning
2. **Left Icon** - Optional icon on the left side
3. **Input Element** - The actual input field
4. **Right Icon** - Optional icon on the right side
5. **Password Toggle** - Optional password visibility toggle

## Styling

The component includes default styling with:

- Consistent padding and border radius
- Color-coded variants for semantic meaning
- Smooth transitions for state changes
- Dark mode support with appropriate color schemes
- Focus states for accessibility
- Customizable through className prop

### Custom Styling

You can customize the appearance using the className prop:

```tsx
<Input
  placeholder="Custom styled input"
  className="custom-input-class"
  variant="success"
/>
```

## Accessibility

The Input component is built with accessibility in mind:

- **Semantic HTML**: Uses proper input elements with appropriate attributes
- **ARIA Attributes**: Proper ARIA labels and descriptions for screen readers
- **Keyboard Navigation**: Full keyboard support including Tab navigation
- **Focus Management**: Clear focus indicators and logical tab order
- **Screen Reader Support**: Announces input states and validation appropriately
- **High Contrast**: Maintains proper contrast ratios across all variants
